<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
</head>
<body>
<div id="app"></div>
<script>
  const MyComponent = function() {
    return {
      tag: 'div',
      props: {
        onClick: () => console.log('ok'),
      },
      children: 'click me'
    }
  }

  let vnode = {
    'tag': MyComponent
  }

  function mountComponent(vnode, container) {
    const subtree = vnode.tag()
    renderer(subtree, container)
  }

  function mountElement(vnode, container) {
    const el = document.createElement(vnode.tag)
    for (const key in vnode.props) {
      if (/^on/.test(key)) {
        el.addEventListener(key.substr(2).toLowerCase(), vnode.props[key])
      }
    }

    if (Array.isArray(vnode.children)) {
      vnode.children.forEach(child => renderer(child, el))
    } else {
      let textNode = document.createTextNode(vnode.children)
      el.appendChild(textNode)
    }

    container.appendChild(el)
  }
  function renderer(vnode, container) {
    if (typeof vnode.tag === 'string') {
      mountElement(vnode, container)
    } else if (typeof vnode.tag === 'function') {
      mountComponent(vnode, container)
    }
  }

  renderer(vnode, document.getElementById('app'))
</script>
</body>
</html>
